<script setup lang="ts">
import type { Ref } from 'vue';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';

import Order from '@core/engine/Order';
import RouteHelper from '@core/utils/RouteHelper';
import SubViewContainer from '@core/components/subLayout/SubViewContainer.vue';
import Firewall, { FirewallSummary } from '@firewall/engine/Firewall';

const router = useRouter();
const route = useRoute();
const { t } = useI18n({ inheritLocale: true, useScope: 'local' });

const isTableLoading = ref(true);
const firewalls: Ref<Array<FirewallSummary>> = ref([]);
const refreshFirewall = async () => {
  isTableLoading.value = true;
  const response = await Firewall.fetchSummaryList({
    vpcIds: RouteHelper.queryValueToPlural(route.query.vpcId),
  });
  firewalls.value = response.list || [];
  isTableLoading.value = false;
};
const refundOrder = async () => {
  isTableLoading.value = true;
  try {
    await Order.placeRefundOrder({
      resourceDetailJson: {
        resources: [{
          resourceIds: firewalls.value.map((firewall) => firewall.masterResourceId),
        }],
        autoApproval: true,
      },
      type: 2,
    });
  } finally {
    isTableLoading.value = false;
  }
};
onMounted(async () => {
  await refreshFirewall();
});
const hasConfirmToRefund = ref(false);
const onClickRefund = async () => {
  if (!hasConfirmToRefund.value) {
    ElMessage.warning(t('noConfirmToRefundMessage'));
  } else {
    await refundOrder();
    ElMessage.success(t('unsubscribeSuccessTip'));
    router.push({ name: 'configCenter.quota' });
  }
};
</script>

<template>
  <SubViewContainer>
    <ElCard v-loading="isTableLoading">
      <div class="table-with-pagination">
        <ElTable size="small" :data="firewalls">
          <ElTableColumn property="firewallName" :label="t('firewallName')" />
          <ElTableColumn :label="t('firewallEdition')" >
            <template #default="scope">{{ t(`firewallEditions.${scope.row.firewallEdition}`) }}</template>
          </ElTableColumn>
          <ElTableColumn :label="t('quotaState')" >
            <template #default="scope">{{ t(`quotaStates.${scope.row.state}`) }}</template>
          </ElTableColumn>
          <ElTableColumn :label="t('vpc')" >
            <template #default="scope">
              <div class="id">{{scope.row.vpcId}}</div>
              <div class="ip">{{scope.row.vpcIp}}</div>
            </template>
          </ElTableColumn>
          <ElTableColumn :label="t('expireAt')" >
            <template #default="scope">
              {{scope.row.expireTime ? dayjs(scope.row.expireTime).format(t('dateFormat')) : '-'}}
            </template>
          </ElTableColumn>
        </ElTable>
      </div>
      <div class="buttons">
        <ElButton type="primary" @click="onClickRefund">{{t('quotaRefund')}}</ElButton>
        <RouterLink :to="{ name: 'configCenter.quota' }">
          <ElButton>{{t('toQuotaManage')}}</ElButton>
        </RouterLink>
      </div>
      <ElCheckbox v-model="hasConfirmToRefund" :label="t('confirmToRefundTips')" />
    </ElCard>
  </SubViewContainer>
</template>

<i18n lang="yaml" locale="zh-CN">
  dateFormat: 'YYYY-MM-DD'
  toQuotaManage: '取消'
  quotaRefund: '退订'
  quotaState: '配额状态'
  inputToSearchPlease: 请输入搜索条件
  firewallName: '云防火墙名称'
  firewallEdition: '配额规格'
  vpc: '虚拟私有云'
  expireAt: '配额到期时间'
  confirmToRefundTips: '确认退订上述云防火墙（原生版）配额'
  quotaStates:
    true: '正常'
    false: '退订'
  firewallEditions:
    AdvancedEdition: '高级版'
  noConfirmToRefundMessage: '请先勾选确认退订配额'
  unsubscribeSuccessTip: '退订成功'
</i18n>

<style lang="scss" scoped>
.guide-steps {
  margin-bottom: 16px;
}

.table-with-pagination {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.buttons {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;

  .el-button {
    margin-right: 10px;
  }
}

.id {
  color: var(--el-color-primary);
}
</style>
